<template>
    <div class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body">
                <ul class="cart-list" v-for="item in cartList" :key="item.id">
                    <li class="cart-list-con1">
                        <input
                            @click="changeChecked(item.skuId, $event.target.checked)"
                            :checked="item.isChecked"
                            type="checkbox"
                            name="chk_list"
                        />
                    </li>
                    <li class="cart-list-con2">
                        <img :src="item.imgUrl" />
                        <div class="item-msg">
                            {{ item.skuName }}
                        </div>
                    </li>
                    <li class="cart-list-con3">
                        <div class="item-txt">语音升级款</div>
                    </li>
                    <li class="cart-list-con4">
                        <span class="price">
                            {{ item.skuPrice }}
                        </span>
                    </li>
                    <li class="cart-list-con5">
                        <a
                            href="javascript:void(0)"
                            class="mins"
                            @click="changeSkuNum(item.skuId, item.skuNum - 1)"
                        >
                            -
                        </a>
                        <input
                            autocomplete="off"
                            type="text"
                            :value="item.skuNum"
                            minnum="1"
                            class="itxt"
                            @change="changeSkuNum(item.skuId, +$event.target.value)"
                        />
                        <a
                            href="javascript:void(0)"
                            class="plus"
                            @click="changeSkuNum(item.skuId, item.skuNum + 1)"
                        >
                            +
                        </a>
                    </li>
                    <li class="cart-list-con6">
                        <span class="sum">
                            {{ item.skuPrice * item.skuNum }}
                        </span>
                    </li>
                    <li class="cart-list-con7">
                        <a href="#none" class="sindelet" @click="deleteCart(item.skuId)">删除</a>
                        <br />
                        <a href="#none">移到收藏</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input v-model="allSelectCart" class="chooseAll" type="checkbox" />
                <span>全选</span>
            </div>
            <div class="option">
                <a @click="deleteAllSelectCart" href="#none">删除选中的商品</a>
                <a href="#none">移到我的关注</a>
                <a href="#none">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">
                    已选择
                    <span>
                        {{ allNum }}
                    </span>
                    件商品
                </div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">
                        {{ allPrice }}
                    </i>
                </div>
                <div class="sumbtn">
                    <a class="sum-btn" href="###" target="_blank">结算</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    reqAddCartOrUpdataCart,
    reqDeleteCart,
    reqCartList,
    reqChangeChecked,
    reqAllSelectCart,
    reqDeleteAllSelectCart,
} from "@/api/index";
export default {
    name: "ShopCart",
    data() {
        return {
            cartList: [],
        };
    },
    mounted() {
        this.getShopCartList();
    },
    computed: {
        allPrice() {
            return this.cartList
                .filter((item) => item.isChecked === 1)
                .reduce((p, c) => {
                    return p + c.cartPrice * c.skuNum;
                }, 0);
        },
        allNum() {
            return this.cartList
                .filter((item) => item.isChecked === 1)
                .reduce((p, c) => {
                    return p + c.skuNum;
                }, 0);
        },
        // 5. 批量修改购物车状态
        allSelectCart: {
            get() {
                return this.cartList.every((item) => item.isChecked);
            },
            async set(isChecked) {
                const skuIdList = this.cartList.map((item) => item.skuId);
                await reqAllSelectCart(skuIdList, isChecked ? 1 : 0);
                this.getShopCartList();
            },
        },
    },
    methods: {
        // 1.获取购物车列表
        async getShopCartList() {
            const result = await reqCartList();
            this.cartList = result[0]?.cartInfoList || [];
        },
        // 2.加减购物车商品数量
        async changeSkuNum(skuId, skuNum) {
            //上面传过来的skuNum是修改后的数量
            if (skuNum < 1) return;
            // 下面的代码根据id查到原数量skuNumOrign
            const skuNumOrign = this.cartList.find((item) => {
                return item.skuId === skuId;
            }).skuNum;
            //计算差值
            const skuNumDiff = skuNum - skuNumOrign;
            try {
                await reqAddCartOrUpdataCart(skuId, skuNumDiff); //这里的skuNum是原数量和修改后数量的差值
                this.getShopCartList();
            } catch (error) {
                alert(error.message);
            }
        },
        // 3. 购物车删除特定商品
        async deleteCart(skuId) {
            await reqDeleteCart(skuId);
            this.getShopCartList();
        },
        // 4. 修改购物车单个状态
        async changeChecked(skuID, isChecked) {
            await reqChangeChecked(skuID, isChecked ? 1 : 0);
            this.getShopCartList();
        },
        // 5.批量删除已选中的商品
        async deleteAllSelectCart() {
            const skuIdList = this.cartList.reduce((p, c) => {
                if (c.isChecked) p.push(c.skuId);
                return p;
            }, []);
            console.log(skuIdList);
            await reqDeleteAllSelectCart(skuIdList);
            this.getShopCartList();
        },
    },
};
</script>

<style lang="less" scoped>
.cart {
    width: 1200px;
    margin: 0 auto;

    h4 {
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
    }

    .cart-main {
        .cart-th {
            background: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;

            & > div {
                float: left;
            }

            .cart-th1 {
                width: 25%;

                input {
                    vertical-align: middle;
                }

                span {
                    vertical-align: middle;
                }
            }

            .cart-th2 {
                width: 25%;
            }

            .cart-th3,
            .cart-th4,
            .cart-th5,
            .cart-th6 {
                width: 12.5%;
            }
        }

        .cart-body {
            margin: 15px 0;
            border: 1px solid #ddd;

            .cart-list {
                padding: 10px;
                border-bottom: 1px solid #ddd;
                overflow: hidden;

                & > li {
                    float: left;
                }

                .cart-list-con1 {
                    width: 4.1667%;
                }

                .cart-list-con2 {
                    width: 25%;

                    img {
                        width: 82px;
                        height: 82px;
                        float: left;
                    }

                    .item-msg {
                        float: left;
                        width: 150px;
                        margin: 0 10px;
                        line-height: 18px;
                    }
                }

                .cart-list-con3 {
                    width: 20.8333%;

                    .item-txt {
                        text-align: center;
                    }
                }

                .cart-list-con4 {
                    width: 12.5%;
                }

                .cart-list-con5 {
                    width: 12.5%;

                    .mins {
                        border: 1px solid #ddd;
                        border-right: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }

                    input {
                        border: 1px solid #ddd;
                        width: 40px;
                        height: 33px;
                        float: left;
                        text-align: center;
                        font-size: 14px;
                    }

                    .plus {
                        border: 1px solid #ddd;
                        border-left: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                }

                .cart-list-con6 {
                    width: 12.5%;

                    .sum {
                        font-size: 16px;
                    }
                }

                .cart-list-con7 {
                    width: 12.5%;

                    a {
                        color: #666;
                    }
                }
            }
        }
    }

    .cart-tool {
        overflow: hidden;
        border: 1px solid #ddd;

        .select-all {
            padding: 10px;
            overflow: hidden;
            float: left;

            span {
                vertical-align: middle;
            }

            input {
                vertical-align: middle;
            }
        }

        .option {
            padding: 10px;
            overflow: hidden;
            float: left;

            a {
                float: left;
                padding: 0 10px;
                color: #666;
            }
        }

        .money-box {
            float: right;

            .chosed {
                line-height: 26px;
                float: left;
                padding: 0 10px;
            }

            .sumprice {
                width: 200px;
                line-height: 22px;
                float: left;
                padding: 0 10px;

                .summoney {
                    color: #c81623;
                    font-size: 16px;
                }
            }

            .sumbtn {
                float: right;

                a {
                    display: block;
                    position: relative;
                    width: 96px;
                    height: 52px;
                    line-height: 52px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    font-family: "Microsoft YaHei";
                    background: #e1251b;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>
